<template>
	<view class="interactiveBar">
		<!-- 分享、点赞、收藏 -->
		<view class="info">
			<view class="left">

				<view class="item" v-if="isComment" @click="lickCommentBtn">
					<input placeholder="评价一下吧" />
				</view>

				<view class="item" v-else>
					<uni-icons type="redo" size="28" color="#999"></uni-icons>
					<text>1</text>
				</view>


			</view>
			<view class="right">
				<view class="item" @click="clickLike">
					<uni-icons v-if="true" type="heart" size="28" color="#999"></uni-icons>
					<uni-icons v-else type="heart-filled" size="28" color="#dd524d"></uni-icons>
					<text>1</text>
				</view>

				<view class="item" @click="clickCollect">
					<uni-icons v-if="true" type="star" size="28" color="#999"></uni-icons>
					<uni-icons v-else type="star-filled" size="28" color="#f0ad4e"></uni-icons>
					<text>1</text>
				</view>

				<view class="item">
					<uni-icons type="chatbubble" size="28" color="#999"></uni-icons>
					<text>1</text>
				</view>

				<view class="item" v-if="isComment">
					<uni-icons type="redo" size="28" color="#999"></uni-icons>
				</view>

			</view>
		</view>
	</view>
</template>

<script setup>
	defineProps({
		// 是否点赞
		isComment: {
			type: Boolean,
			default: false
		},

	})

	const emitEvent = defineEmits(['popupComment'])

	// 点击评论框按钮
	const lickCommentBtn = () => {
		emitEvent('popupComment', "传入你要传入的")
	}

	const clickLike = () => {
		console.log('点赞')
	}
	const clickCollect = () => {
		console.log('收藏')
	}
</script>

<style scoped lang="scss">
	.interactiveBar {

		// 分享收藏点赞
		.info {
			height: 130rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;

			.item {
				display: flex;
				padding: 10rpx 15rpx; // 增加点击范围
				color: #999;
				align-items: center;
			}

			.left {
				flex: 1;
				margin-left: 15rpx;

				.item {
					padding-left: 0;

					input {
						width: 100%;
						height: 70rpx;
						background: #f7f7f7;
						border-radius: 70rpx;
						display: flex;
						align-items: center;
						padding: 0 30rpx;
					}
				}


			}

			.right {
				display: flex;


				.item:last-child {
					padding-right: 0;
				}
			}
		}
	}
</style>